<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语言学习中心 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
            }
        }
    </style>
</head>
<body class="bg-light text-dark min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav id="navbar" class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <a href="index.html" class="flex items-center space-x-2">
            <i class="fa fa-comments text-primary text-2xl"></i>
            <span class="font-bold text-xl text-primary">语言学习中心</span>
        </a>

        <!-- 桌面导航 -->
        <div class="hidden md:flex items-center space-x-8">
            <a href="index.html" class="font-medium text-primary border-b-2 border-primary py-1">首页</a>
            <a href="random.html" class="font-medium text-gray-600 hover:text-primary transition-colors py-1">随便体验</a>
            <a href="english.html" class="font-medium text-gray-600 hover:text-primary transition-colors py-1">英语口语练习</a>
            <a href="history.html" class="font-medium text-gray-600 hover:text-primary transition-colors py-1">历史场景对话</a>
        </div>

        <!-- 移动端菜单按钮 -->
        <button id="menu-toggle" class="md:hidden text-gray-600 focus:outline-none">
            <i class="fa fa-bars text-xl"></i>
        </button>
    </div>

    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-white border-t">
        <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
            <a href="index.html" class="font-medium text-primary py-2">首页</a>
            <a href="random.html" class="font-medium text-gray-600 hover:text-primary transition-colors py-2">随便体验</a>
            <a href="english.html" class="font-medium text-gray-600 hover:text-primary transition-colors py-2">英语口语练习</a>
            <a href="history.html" class="font-medium text-gray-600 hover:text-primary transition-colors py-2">历史场景对话</a>
        </div>
    </div>
</nav>

<!-- 主要内容 -->
<main class="flex-grow pt-16">
    <!-- 英雄区域 -->
    <section class="relative bg-gradient-to-br from-primary/90 to-accent/90 text-white overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/c2928101b03e44df955ef1ab0dc9b07b.png~tplv-a9rns2rl98-24:720:720.png?rcl=202509231222443DEFA059C18ED5260D7F&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1759206165&x-signature=H9fOgwRgG2o4uiCdhIuC33JGlL0%3D')] bg-cover bg-center opacity-20"></div>
        <div class="container mx-auto px-4 py-20 md:py-32 relative z-10">
            <div class="max-w-3xl">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow mb-6">
                    提升你的语言能力，<br>开启全新对话体验
                </h1>
                <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-8 max-w-2xl">
                    通过沉浸式场景练习，快速提升语言技能。从日常对话到历史场景，多种模式满足你的学习需求。
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="random.html" class="bg-white text-primary hover:bg-gray-100 font-medium px-6 py-3 rounded-lg shadow-lg transition-all transform hover:-translate-y-1">
                        立即开始 <i class="fa fa-arrow-right ml-2"></i>
                    </a>
                    <a href="english.html" class="bg-transparent border-2 border-white text-white hover:bg-white/10 font-medium px-6 py-3 rounded-lg transition-all">
                        了解更多
                    </a>
                </div>
            </div>
        </div>

        <!-- 波浪装饰 -->
        <div class="absolute bottom-0 left-0 w-full">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" class="w-full h-auto fill-light">
                <path d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z"></path>
            </svg>
        </div>
    </section>

    <!-- 功能区域 -->
    <section class="py-16 md:py-24">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">探索我们的学习模式</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">选择适合你的学习方式，开始语言之旅</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- 随便体验 -->
                <a href="random.html" class="block">
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover h-full">
                        <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 relative">
                            <i class="fa fa-random absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-6xl opacity-70"></i>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-3 text-dark">随便体验</h3>
                            <p class="text-gray-600 mb-4">随机生成各种场景对话，让你在轻松愉快的氛围中练习语言表达能力。</p>
                            <span class="inline-flex items-center text-primary font-medium">
                                    开始体验 <i class="fa fa-arrow-right ml-2"></i>
                                </span>
                        </div>
                    </div>
                </a>

                <!-- 英语口语练习 -->
                <a href="english.html" class="block">
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover h-full">
                        <div class="h-48 bg-gradient-to-r from-green-400 to-teal-500 relative">
                            <i class="fa fa-comments absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-6xl opacity-70"></i>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-3 text-dark">英语口语练习</h3>
                            <p class="text-gray-600 mb-4">专注于提升英语口语能力，模拟真实交流场景，锻炼听说技能。</p>
                            <span class="inline-flex items-center text-primary font-medium">
                                    开始练习 <i class="fa fa-arrow-right ml-2"></i>
                                </span>
                        </div>
                    </div>
                </a>

                <!-- 历史场景对话 -->
                <a href="history.html" class="block">
                    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover h-full">
                        <div class="h-48 bg-gradient-to-r from-amber-400 to-orange-500 relative">
                            <i class="fa fa-history absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-6xl opacity-70"></i>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-3 text-dark">历史场景对话</h3>
                            <p class="text-gray-600 mb-4">穿越时空，体验不同历史时期的经典对话场景，在学习语言的同时了解历史。</p>
                            <span class="inline-flex items-center text-primary font-medium">
                                    开始探索 <i class="fa fa-arrow-right ml-2"></i>
                                </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- 特点介绍 -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">为什么选择我们</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">我们的语言学习平台提供独特的学习体验</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-sm">
                    <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-graduation-cap text-primary text-xl"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2">沉浸式学习</h3>
                    <p class="text-gray-600">通过真实场景模拟，让你仿佛置身其中，提高学习效率。</p>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-sm">
                    <div class="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-bolt text-secondary text-xl"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2">快速提升</h3>
                    <p class="text-gray-600">专注于实用对话能力培养，让你在短时间内看到明显进步。</p>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-sm">
                    <div class="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-users text-accent text-xl"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2">互动体验</h3>
                    <p class="text-gray-600">不仅仅是单向学习，而是真实的对话互动，提高参与感。</p>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-sm">
                    <div class="w-12 h-12 bg-amber-500/10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-line-chart text-amber-500 text-xl"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2">进度追踪</h3>
                    <p class="text-gray-600">记录你的学习历程和进步，让你清晰了解自己的成长轨迹。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 行动召唤 -->
    <section class="py-16 md:py-24 bg-primary/5">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6">准备好开始你的语言之旅了吗？</h2>
            <p class="text-gray-600 max-w-2xl mx-auto text-lg mb-8">选择一个模式，立即开始你的语言学习体验</p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="random.html" class="bg-primary hover:bg-primary/90 text-white font-medium px-8 py-3 rounded-lg shadow-md transition-all transform hover:-translate-y-1">
                    随便体验 <i class="fa fa-random ml-2"></i>
                </a>
                <a href="english.html" class="bg-secondary hover:bg-secondary/90 text-white font-medium px-8 py-3 rounded-lg shadow-md transition-all transform hover:-translate-y-1">
                    英语口语练习 <i class="fa fa-comments ml-2"></i>
                </a>
                <a href="history.html" class="bg-accent hover:bg-accent/90 text-white font-medium px-8 py-3 rounded-lg shadow-md transition-all transform hover:-translate-y-1">
                    历史场景对话 <i class="fa fa-history ml-2"></i>
                </a>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
            <div>
                <div class="flex items-center space-x-2 mb-4">
                    <i class="fa fa-comments text-primary text-xl"></i>
                    <span class="font-bold text-lg">语言学习中心</span>
                </div>
                <p class="text-gray-400 mb-4">让语言学习变得更有趣、更高效</p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-facebook"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-instagram"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-youtube"></i>
                    </a>
                </div>
            </div>

            <div>
                <h4 class="font-bold text-lg mb-4">快速链接</h4>
                <ul class="space-y-2">
                    <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                    <li><a href="random.html" class="text-gray-400 hover:text-white transition-colors">随便体验</a></li>
                    <li><a href="english.html" class="text-gray-400 hover:text-white transition-colors">英语口语练习</a></li>
                    <li><a href="history.html" class="text-gray-400 hover:text-white transition-colors">历史场景对话</a></li>
                </ul>
            </div>

            <div>
                <h4 class="font-bold text-lg mb-4">支持</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">帮助中心</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                </ul>
            </div>

            <div>
                <h4 class="font-bold text-lg mb-4">订阅更新</h4>
                <p class="text-gray-400 mb-4">获取最新的学习资源和技巧</p>
                <form class="flex">
                    <input type="email" placeholder="你的邮箱地址" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-dark">
                    <button type="submit" class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-r-lg transition-colors">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </form>
            </div>
        </div>

        <div class="border-t border-gray-800 pt-8 text-center text-gray-500">
            <p>&copy; 2023 语言学习中心. 保留所有权利.</p>
        </div>
    </div>
</footer>

<script>
    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');

    menuToggle.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });

    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');

    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('py-2', 'shadow');
            navbar.classList.remove('py-3');
        } else {
            navbar.classList.add('py-3');
            navbar.classList.remove('py-2', 'shadow');
        }
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                window.scrollTo({
                    top: target.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });
</script>
</body>
</html>
